<template>
    <div class="g-width100 g-height100">
    <container type="top-header" :show="{header:formShow}" class="g-width100 g-height100" header-style="height:auto;" main-style="padding:0;">
        <Form slot="header" inline
              :submit-bus-key="busKey"
              :form-items="formItems"
              label-width=""
        ></Form>
        <Table slot="main"
               ref="table"
               :form-submit-bus-key="busKey"
               :columns="columns"
               :operations="localTableOperations"
               unique-label="name"
               v-on:toolbarSearchClick="formShow = !formShow"
        ></Table>
    </container>
        <!-- 流程图弹窗 -->
        <ProcessDiagramDialog ref="processDiagramDialog"
                              :data-model-id="flowable.dataModelId"
                              :data-history-model-id="flowable.dataHistoryModelId"
                              :data-model-type="flowable.dataModelType" title="流程图"></ProcessDiagramDialog>
<!-- 历史任务弹窗 -->
        <HistoryTaskDialog ref="historyDialog" :process-instance-id="flowable.historyTaskProcessInstanceId"></HistoryTaskDialog>
        <!-- 任务评论弹窗 -->
        <CommentDialog ref="commentDialog" :query-params="commentQueryParams"></CommentDialog>
    </div>
</template>

<script>
    import Container from '../../../../common-util/src/components/page/Container.vue'
    import Form from '../../../../common-util/src/components/page/Form.vue'
    import Table from '../../../../common-util/src/components/page/Table.vue'
    import ProcessDiagramDialog from '../../../../common-util/src/components/flowable/ProcessDiagramDialog.vue'
    import HistoryTaskDialog from './HistoryTaskDialog.vue'
    import CommentDialog from '../comment/CommentDialog.vue'

    let formDetailButtonCode = 'formDetailButtonCode'
    export default {
        components:{
            Form,
            Table,
            ProcessDiagramDialog,
            HistoryTaskDialog,
            CommentDialog,
            Container
        },
        props:{
            busKey:{
                type: String,
                required: true
            },
            modelType:{
                type: String,
                required: true
            },
            listUrl:{
                type: String,
                required: true
            },
            tableOperations:{
                type: Array
            },
            tableColumns:{
                type: Array
            }
        },
        data(){
            let tempTableOperations = [
                {
                    action: this.showProcessDiagram,
                    disabledOnMissingSelect:true,
                    label:'流程图'
                },
                {
                    action: this.showHistoryTaskDialog,
                    disabledOnMissingSelect:true,
                    label:'历史任务'
                },
                {
                    action: this.showCommentDialog,
                    disabledOnMissingSelect:true,
                    disabled:(row)=>{
                        return !row.firstCommentMessage
                    },
                    label:'任务评论'
                },
                {
                    action: this.detail,
                    disabledOnMissingSelect:true,
                    code: formDetailButtonCode,
                    label:'表单详情'
                }
            ]
            if (this.tableOperations) {
                tempTableOperations = tempTableOperations.concat(this.tableOperations)
            }

            let tempTableColumns = [
                {
                    prop: 'businessKey',
                    label:'业务编号',
                    formatType: 'link',
                    link:{
                        action: this.detail
                    }
                },
                {
                    prop: 'name',
                    label:'任务名称'
                },
                {
                    prop: 'processDefinitionName',
                    label:'流程名称'
                },
                {
                    prop: 'processStartAtTxt',
                    label:'流程启动时间'
                },
                {
                    prop: 'assignee.firstName',
                    label:'处理人'
                },
                {
                    prop: 'createdStr',
                    label:'任务开始时间'
                },
                {
                    prop: 'endDateStr',
                    label:'任务结束时间'
                },
                {
                    prop: 'claimTimeTxt',
                    label:'签收时间'
                },
                {
                    prop: 'firstCommentMessage',
                    label:'评论',
                    formatType: 'link',
                    link:{
                        action: this.showCommentDialog
                    }
                }
            ]
            if(this.tableColumns){
                tempTableColumns = this.tableColumns
            }
            return {
                formDetailButtonLoading: false,
                formShow: true,
                flowable:{
                    dataModelId: '',
                    dataHistoryModelId: '',
                    dataModelType: this.modelType,
                    historyTaskProcessInstanceId: null
                },
                formItems:[
                    {
                        field: {
                            name: 'businessKey'
                        },
                        element:{
                            label: '业务编号',
                        }
                    },
                    {
                        field: {
                            name: 'taskName'
                        },
                        element:{
                            label: '任务名称',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: 'submit',
                                    requestMethod:'get',
                                    url: this.listUrl,
                                    label: '查询'
                                },
                                {
                                    action: 'reset',
                                    label: '重置'
                                }
                            ]
                        }
                    }
                ],
                columns:tempTableColumns,
                localTableOperations:tempTableOperations,
                commentQueryParams:{
                    type: 'comment',
                    taskId: null,
                    action: 'AddComment'
                }
            }
        },
        methods:{
            showProcessDiagram(row){
                if(!row.processInstanceId){
                    this.$message.info('当前任务不支持查看流程图')
                    return
                }
                // 如果已经结束
                if(row.processEndAtTxt){
                    this.flowable.dataModelId = ''
                    this.flowable.dataHistoryModelId = row.processInstanceId

                }else {
                    // 没有结束
                    this.flowable.dataModelId = row.processInstanceId
                    this.flowable.dataHistoryModelId = ''

                }
                this.$refs.processDiagramDialog.show()
            },
            showHistoryTaskDialog(row){
                if(!row.processInstanceId){
                    this.$message.info('当前任务不支持查看历史任务')
                    return
                }
                this.flowable.historyTaskProcessInstanceId = row.processInstanceId
                this.$refs.historyDialog.show()
            },
            showCommentDialog(row) {
                this.commentQueryParams = {
                    type: 'comment',
                    taskId: row.id,
                    action: 'AddComment'
                }
                this.$refs.commentDialog.show()
            },
            getTableRef(){
                return this.$refs.table
            },
            // 详情
            detail(row){
                // 先获取表单类型
                if(this.formDetailButtonLoading){
                    this.$message.info('正在加载中，请耐心等待')
                    return
                }
                this.formDetailButtonLoading = true
                this.$refs.table.setOperationButtonLoading(formDetailButtonCode,true)
                this.axios.get(this.$baseURL.workflow + '/workflow/form/task/' + row.id + '/taskFormType')
                    .then((res)=>{
                        let data = res.data
                        switch (data.type) {
                            case 'dynamic':{
                                this.$router.push({path: '/formDynamicDetail', query: {taskId:row.id}})
                                break
                            }
                            case 'relation':{
                                this.$router.push({path: '/formRelationDetail', query: {taskId:row.id}})
                                break
                            }
                            case 'normal':{
                                this.$router.push({path: data.formKey, query: {taskId:row.id,businessKey:row.businessKey}})
                                break
                            }
                            default:{
                                this.$message.error('当前任务没有表单详情')
                            }
                        }
                    }).catch(error=>{
                    if(error.response){
                        if(error.response.status == 401){
                            return
                        }
                        this.$message.error(error.response.data.msg)
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.formDetailButtonLoading = false
                    // 这里判断一下，如果页面已经跳转但这里才开始执行，会为空
                    if (this.$refs.table) {
                        this.$refs.table.setOperationButtonLoading(formDetailButtonCode,false)
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>